<template>
  <!-- 项目信息-->
  <div class="app-container">
    <!-- 搜索表单 -->
    <div class="form-container">
      <el-form
        ref="queryForm"
        :model="filters"
        :inline="true"
        label-width="80px"
      >
        <el-form-item label="项目编号" prop="proNum">
          <el-input v-model="filters.proNum" placeholder="请输入项目编号" clearable size="small" />
        </el-form-item>
        <el-form-item label="项目名称" prop="proName">
          <el-input v-model="filters.proName" placeholder="请输入项目名称" clearable size="small" />
        </el-form-item>
        <el-form-item label="地貌类型" prop="regionTypeId">
          <el-select v-model="filters.regionTypeId" placeholder="请选择地貌类型" clearable size="small">
            <el-option
              v-for="dict in regionalType"
              :key="dict.typeNum"
              :label="dict.typeName"
              :value="dict.typeNum"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目状态" prop="status">
          <el-select v-model="filters.status" clearable size="small" @change="selectProStatus">
            <el-option
              v-for="dict in proStatus"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <!-- 高级设置一栏 start -->
        <el-form-item>
          <slot name="label">
            <i class="highLevelStyle" :class="highLevelSet===true?'el-icon-arrow-up':'el-icon-arrow-down'" @click="highLevelSet = !highLevelSet" />
          </slot>
        </el-form-item>
        <el-row v-if="highLevelSet">
          <el-form-item label="项目类型" prop="proTypeId">
            <el-select v-model="filters.proTypeId" placeholder="请选择项目类型" clearable size="small">
              <el-option
                v-for="dict in proTypeList"
                :key="dict.id"
                :label="dict.typeName"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目等级" prop="grade">
            <el-select v-model="filters.grade" placeholder="请选择项目等级" clearable size="small">
              <el-option
                v-for="dict in proGrade"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所在区域" prop="county">
            <el-select v-model="filters.county" size="small" style="width: 199px" clearable placeholder="请选择所在区域">
              <el-option
                v-for="item in cityOptions"
                :key="item.region"
                :label="item.regionName"
                :value="item.region"
              />
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!-- 操作按钮 -->
    <div class="btns-group">
      <el-button v-clickForbidden icon="el-icon-search" size="middle" @click="handleQuery">搜索</el-button>
      <el-button v-clickForbidden icon="el-icon-refresh" size="middle" @click="resetQuery">重置</el-button>
      <el-button icon="el-icon-zoom-in" size="middle" :disabled="singleChild" @click="handleDetail()">详情</el-button>
      <div class="legend">
        <span class="el-icon-collection" /> 勘察任务书
        <span class=" el-icon-aim" /> 勘察纲要
        <span class=" el-icon-tickets" /> 布孔图
        <span class="el-icon-edit-outline">总平图</span>
      </div>
      <span class="personal-type">
        <el-button icon="el-icon-arrow-left" size="middle" @click="handleReturn()">返回</el-button>
      </span>
    </div>
    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      v-loading="loading"
      stripe
      :data="tableData"
      class="table-list"
      :class="highLevelSet===true ? (needTagsView===true ? 'el-body-page-roll-tag-height' : 'el-body-page-roll-height') :
        (needTagsView===true ? 'el-body-page-roll-tag' : 'el-body-page-roll')"
      :row-style="rowClass"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
      @row-click="rowChecked"
    >
      <el-table-column type="selection" width="38" align="center" />
      <el-table-column type="index" label="序号" width="51" align="center" />
      <el-table-column
        prop="proName"
        label="项目名称"
        min-width="180"
        align="left"
        header-align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          <a href="javascript:;" class="link-type" @click.stop="handleDetail(row.id,row,status)">
            <span>{{ row.proName }}</span>
          </a>
        </template>
      </el-table-column>
      <el-table-column
        prop="proNum"
        label="项目编号"
        min-width="120"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          <a href="javascript:;" class="link-type" @click.stop="handleDetail(row.id, row.status)">
            <span>{{ row.proNum }}</span>
          </a>
        </template>
      </el-table-column>
      <el-table-column
        label="项目工期(天)"
        align="center"
        width="120 "
        prop="proDuration"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          {{ proDuration(row) }}
        </template>
      </el-table-column>
      <el-table-column
        label="单价(元)"
        align="center"
        min-width="120 "
        prop="contractPrice"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          <span v-if="row.proName">{{ divideMoney(row.contractPrice,2) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="合同金额(万元)"
        align="center"
        min-width="120 "
        prop="contractAmount"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          <span v-if="row.proName">{{ divideMoney(row.contractAmount,6, true) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="钻机数"
        align="center"
        width="80 "
        prop="equipmentNum"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="已探米数"
        align="center"
        width="80 "
        prop="detectedMeters"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="总延米"
        align="center"
        width="80 "
        prop="drillMember"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="已完成钻孔"
        align="center"
        width="100 "
        prop="dillingCompleted"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="钻孔总数"
        align="center"
        width="80 "
        prop="drillingCount"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="是否备案"
        align="center"
        width="80 "
        prop="proRecord"
      >
        <template slot-scope="{row}">
          <span v-if="row.proRecord === '0'">否</span>
          <span v-if="row.proRecord === '1'">是</span>
        </template>
      </el-table-column>
      <el-table-column
        label="项目状态"
        min-width="80 "
        align="center"
        prop="status"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status === ''">-</span>
          <span v-else>{{ scope.row.status | ProStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="已上传附件"
        min-width="140 "
        align="center"
        prop="status"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.id">
            <span class="file-icon el-icon-collection" :class="scope.row.surveySpecification ? 'active': ''" />
            <span class="file-icon el-icon-aim" :class="scope.row.investigation ? 'active': ''" />
            <span class="file-icon el-icon-tickets" :class="scope.row.boreholePattern ? 'active': ''" />
            <span class="file-icon el-icon-edit-outline" :class="scope.row.soheiMap ? 'active': ''" />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="计划开始时间"
        align="center"
        width="110"
        prop="startTime"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="计划结束时间"
        align="center"
        width="110 "
        prop="endTime"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <pagination
      :total="total"
      :page.sync="filters.pageNum"
      :limit.sync="filters.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getEnterpriseType } from '@/utils/auth'
// 项目类型
import { getProTypeListNo } from '@/api/superviseBaseInfo/typeManage/projectType'
// 地貌类型
import { getRegionalTypeListNo } from '@/api/superviseBaseInfo/regionalSettings'
import { mapState } from 'vuex'
// 页面接口
import { listProject } from '@/api/statisticsList/project'
export default {
  name: 'PatrolList',
  components: {
  },
  data() {
    return {
      cityOptions: [],
      // 项目类型
      proTypeList: [],
      // 地貌类型
      regionalType: [],
      // 详情区分父子
      isParent: false,
      /* 搜索条件 start*/
      highLevelSet: false, // 高级搜索
      dateRange: [], // 时间范围数组
      filters: { // 查询参数
        pageNum: 1,
        pageSize: this.fristPageSize,
        proNum: '', // 项目编号
        proName: '', // 项目名称
        status: '1', // 项目状态
        proTypeId: '', // 项目类型
        regionTypeId: '', // 地貌类型
        grade: '', // 项目等级
        county: '',
        enterpriseType: '',
        dataObjType: 'ProInfo' // 数据权限配置传参
      },
      /* 搜索条件 end*/

      // 选择框标题
      childrenTitle: '',
      multiple: true, // 非多个禁用
      /* 列表 start*/
      tableData: [], // 列表
      selectRow: [], // 高亮数组
      loading: false,
      multipleSelection: [], // 选中的行对象
      total: 0, // 总条数
      /* 列表 end*/

      /* 更新项目状态 */
      status: ''// 选中项目的状态
    }
  },
  computed: {
    ...mapState({
      needTagsView: (state) => state.settings.tagsView,
      proStatus: (state) => state.basicInfo.ProStatusList,
      proGrade: (state) => state.basicInfo.proGrade
    }),
    // 高级搜索显示隐藏
    handleTagShow() {
      return this.highLevelSet
    },
    // 控制详情
    singleChild() {
      return this.multipleSelection.length === 0
    },
    // 子级按钮
    single() {
      const multip = this.multipleSelection
      return multip.length === 0 || Object.prototype.hasOwnProperty.call(multip[0], 'children')
    },
    // 项目工期
    proDuration() { // 获得天数
      // date1：开始日期，date2结束日期
      return (row) => {
        if (!row.startTime) return
        const a1 = Date.parse(new Date(row.startTime))
        const a2 = Date.parse(new Date(row.endTime))
        const day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24))// 核心：时间戳相减，然后除以天数
        return day
      }
    }
  },
  watch: {
    $route(to, from) {
      this.$router.go(0)
    },
    multipleSelection: {
      deep: true,
      handler(newMultip) {
        if (newMultip.length === 0) return
        this.isParent = newMultip[0].parentId === '0'
      }
    }
  },
  mounted() {
    this.filters.enterpriseType = getEnterpriseType()
    const { status, region, proTypeId, regionTypeId, proLevel, cityOptions, sequenceWay, sequenceCondition } = this.$route.params
    this.cityOptions = cityOptions
    this.$nextTick(() => {
      this.filters = { ...this.filters, regionTypeId: regionTypeId || '', sequenceWay: sequenceWay || '', sequenceCondition: sequenceCondition || '', status: status || '', county: region || '', proTypeId: proTypeId || '', grade: proLevel || '' }
      this.getList()
    })
    this.getRegionalType()
    this.getProjectType()
  },
  methods: {
    // 获取项目类型
    async getProjectType() {
      const { data: { rows }} = await getProTypeListNo()
      this.proTypeList = [{ typeName: '全部', id: '' }, ...rows]
    },
    // 获取地貌类型
    async getRegionalType() {
      const { data: { rows }} = await getRegionalTypeListNo()
      this.regionalType = [{ typeName: '全部', typeNum: '' }, ...rows]
    },
    // 向导
    guide() {
      this.$refs.Guide.guide()
    },
    // 选择项目状态
    selectProStatus(e) {
      this.status = e
    },
    /* 列表 start*/
    // 单击每行时每行的复选框选中
    rowChecked(row) {
      const multip = this.multipleSelection
      this.$refs.multipleTable.clearSelection()
      const isChked = multip.length !== 1 || multip[0] !== row
      this.$refs.multipleTable.toggleRowSelection(row, isChked)
    },
    // 多选框选中数据
    handleSelectionChange(val) {
      if (JSON.stringify(val[0]) === '{}') {
        this.$refs.multipleTable.clearSelection()
        val = []
      }
      this.selectRow = []
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.selectRow.push(this.tableData.indexOf(val[0]))
      }
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(val.pop())
      }
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background-color': 'rgba(185,221,249,.75)' }
      }
    },
    // 获取列表
    async getList() {
      this.loading = true
      try {
        const { data: { rows, total }} = await listProject(this.filters)
        this.tableData = rows
        this.total = total
        this.loading = false
        this.addTaleData()
      } catch {
        this.loading = false
      }
    },
    // list表格填充空白行
    addTaleData() {
      const arr = {}
      if (this.tableData.length < this.filters.pageSize) {
        this.tableData.push(arr)
        this.addTaleData()
      }
    },
    // 搜索方法
    handleQuery() {
      this.getList()
    },
    // 重置搜索
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /* 列表 end*/
    // 详情
    handleDetail(id, proStatus) {
      id = id || this.multipleSelection[0].id
      proStatus = proStatus || this.multipleSelection[0].status
      this.$store.commit('basicInfo/SET_ProId', id)
      this.$store.commit('basicInfo/SET_ProStatus', proStatus)
      this.$router.push({
        path: '/projectControl/project-control-detail'
      })
    },
    // 返回
    handleReturn() {
      if (this.$route.params.currentTable) {
        this.$router.push({ name: 'projectStatistics', params: { currentTable: this.$route.params.currentTable }})
      } else {
        this.$router.go(-1)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .file-icon{
    color:#999999;
    margin-right: 5px;
    &.active{
      color:#0a7fff;
    }
  }
  .btns-group{
    .legend{
      right:90px;
    }
  }
</style>
